<template>
  <el-dialog :title="'收款账户审核'" :modelValue="visible" @update:modelValue="updateVisible" width="700px" append-to-body @close="handleClose">
    <el-form ref="auditFormRef" :model="form" label-width="120px">
      <el-descriptions title="基础信息" :column="2" border>
        <el-descriptions-item label="账户名称">{{ form.accountName }}</el-descriptions-item>
        <el-descriptions-item label="账户类型">
          <dict-tag :options="accountTypeOptions" :value="form.accountType" />
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ form.contactPhone }}</el-descriptions-item>
        <el-descriptions-item label="联系邮箱">{{ form.contactEmail }}</el-descriptions-item>
        <el-descriptions-item label="开户行">{{ form.bankName }}</el-descriptions-item>
        <el-descriptions-item label="银行账号">{{ form.bankAccount }}</el-descriptions-item>
        <el-descriptions-item label="结算类型">
          <dict-tag :options="settlementTypeOptions" :value="form.settlementType" />
        </el-descriptions-item>
        <el-descriptions-item label="所属公寓">{{ form.apartmentName }}</el-descriptions-item>
      </el-descriptions>

      <!-- 个人账户信息 -->
      <div v-if="form.accountType === '1'">
        <el-divider content-position="left">个人账户信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="账户持有人">{{ form.accountHolder }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ form.idCardNo }}</el-descriptions-item>
          <el-descriptions-item label="身份证正面">
            <image-preview :src="form.idCardFrontImg" :width="100" :height="100" />
          </el-descriptions-item>
          <el-descriptions-item label="身份证反面">
            <image-preview :src="form.idCardBackImg" :width="100" :height="100" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 企业账户信息 -->
      <div v-if="form.accountType === '2'">
        <el-divider content-position="left">企业账户信息</el-divider>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="公司名称">{{ form.companyName }}</el-descriptions-item>
          <el-descriptions-item label="统一社会信用代码">{{ form.unifiedSocialCreditCode }}</el-descriptions-item>
          <el-descriptions-item label="法人姓名">{{ form.legalPersonName }}</el-descriptions-item>
          <el-descriptions-item label="法人身份证号">{{ form.legalPersonIdCardNo }}</el-descriptions-item>
          <el-descriptions-item label="营业执照">
            <image-preview :src="form.businessLicenseImg" :width="100" :height="100" />
          </el-descriptions-item>
          <el-descriptions-item label="法人身份证正面">
            <image-preview :src="form.legalPersonIdCardFrontImg" :width="100" :height="100" />
          </el-descriptions-item>
          <el-descriptions-item label="法人身份证反面">
            <image-preview :src="form.legalPersonIdCardBackImg" :width="100" :height="100" />
          </el-descriptions-item>
          <el-descriptions-item label="开户许可证">
            <image-preview :src="form.accountOpeningLicenseImg" :width="100" :height="100" />
          </el-descriptions-item>
          <el-descriptions-item label="经营场所照片">
            <image-preview :src="form.businessPlaceImg" :width="100" :height="100" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <el-divider content-position="left">审核信息</el-divider>
      <el-form-item label="审核备注" prop="auditRemark">
        <el-input v-model="form.auditRemark" type="textarea" placeholder="请输入审核备注" />
      </el-form-item>
      <el-form-item label="审核结果" prop="auditStatus">
        <el-radio-group v-model="form.auditStatus">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitAudit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    required: true
  },
  dictOptions: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'submit', 'close'])

// 从props中获取字典选项
const accountTypeOptions = props.dictOptions.accountTypeOptions
const settlementTypeOptions = props.dictOptions.settlementTypeOptions

// 内部表单数据，将传入的数据复制一份
const form = ref({...props.data})

// 表单引用
const auditFormRef = ref(null)

// 提交审核
function submitAudit() {
  if (!form.value.auditStatus) {
    // 使用全局提示组件
    ElMessage.error('请选择审核结果')
    return
  }
  emit('submit', form.value)
}

// 更新visible状态
function updateVisible(val) {
  emit('update:visible', val)
}

// 关闭对话框
function closeDialog() {
  emit('update:visible', false)
}

// 处理对话框关闭
function handleClose() {
  emit('close')
}

// 监听数据变化，更新内部表单
watch(
  () => props.data,
  (newVal) => {
    form.value = {...newVal}
  },
  { deep: true, immediate: true }
)

// 由于已经使用:modelValue和@update:modelValue替代了v-model，这个监听不再需要
// watch(
//   () => props.visible,
//   (newVal) => {
//     if (!newVal) {
//       emit('update:visible', false)
//     }
//   }
// )
</script> 